﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
	<div class="draggable-constrain-movement">
		<p>
			Constrain the movement of each draggable by defining the boundaries of the
			draggable area. Set the axis option to limit the draggable's path to the
			x- or y-axis, or use the containment option to specify a parent DOM element
			or a jQuery selector, like 'document.'
		</p>

		<h3 class="docs">Constrain movement along an axis:</h3>
		
		<div id="draggable" class="draggable ui-widget-content">
			<p>I can be dragged only vertically</p>
		</div>
		
		<div id="draggable2" class="draggable ui-widget-content">
			<p>I can be dragged only horizontally</p>
		</div>

		<h3 class="docs">Or to within another DOM element:</h3>
		
		<div id="containment-wrapper">
			<div id="draggable3" class="draggable ui-widget-content">
				<p>I'm contained within the box</p>
			</div>
			<div id="draggable4" class="draggable ui-widget-content">
				<p>I'm contained within the box's parent</p>
			</div>
			<div class="draggable ui-widget-content">
				<p id="draggable5" class="ui-widget-header">
					I'm contained within my parent
				</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	    ContribSample.jQueryUI.DraggableSamples.constrainMovement();
	</script>
</asp:Content>
